<template>
  <view class="box">
    <view class="top">
      <view class="title">
        <image class="back" src="https://pic.bangbangtongcheng.com/static/back.png" @click="back" />
        登录
      </view>
    </view>
    <view class="login-main">
      <view class="" style="width: 228rpx; height: 216rpx; margin: 0 auto; margin-top: 164rpx">
        <image
          style="width: 100%; height: 100%"
          src="https://pic.bangbangtongcheng.com/static/d210d0495c29ea86f99128158bef528.png"
          mode="widthFix"
          alt=""
        />
      </view>
      <view class="login-box" v-show="!showPhoneLogin">
        <button class="login login1" v-show="!status" @click="disagree">手机号一键登录</button>
        <button
          class="login login1"
          v-show="status"
          open-type="getPhoneNumber"
          @getphonenumber="decryptPhoneNumber"
        >
          手机号一键登录
        </button>
        <button class="login login2" @click="phoneCodeLogin">手机验证码登录</button>
        <button class="login login3" @click="back">暂不登录</button>
        <view class="agreement">
          <view class="checkbox-box flex_center" @click="checkClick">
            <view class="checkbox flex_center" :class="{ active: status }"> </view>
          </view>
          <view class="text">
            <text>已阅读并同意</text>
            <view class="tags" @click="tags(3)">《用户协议》</view>
            和
            <view class="tags" @click="tags(2)">《隐私协议》</view>
          </view>
        </view>
      </view>
      <view v-show="showPhoneLogin" class="phone-login-box">
        <view class="phone-login">
          <view class="login-form">
            <view class="mobile">
              <view class="country-code"> +86 丨 </view>
              <input class="input" v-model="form.mobile" placeholder="请输入手机号" type="text" />
            </view>
            <view class="code">
              <input class="input" v-model="form.code" placeholder="请输入验证码" type="text" />
              <view
                class="getcode"
                :class="{ active: form.mobile.length === 11 && !sendCode }"
                @click="getcode"
              >
                {{ sendCode > 0 ? sendCode + 's后重新发送' : '发送验证码' }}
              </view>
            </view>
          </view>
          <view class="login flex_center" @click="login"> 登录 </view>
        </view>
      </view>
    </view>
    <!-- <cover-view></cover-view> -->
    <view class="motaikuang" v-show="show" @click="show = false">
      <div class="verify" @click.stop="aaa">
        <verify :show="show" @Handle="Handle"></verify>
      </div>
    </view>
    <view class="motaikuang motaikuang1" v-show="show1" @click="show1 = false">
      <view class="text" @click.stop="aaa">
        <view class="textTitle">{{ text }}</view>
        <scroll-view class="scroll-view" scroll-y>
          <!-- <rich-text :nodes="data.content"></rich-text> -->
          <!-- #ifdef MP-WEIXIN -->
          <rich-text :nodes="data.content"></rich-text>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <mp-html :content="data.content"></mp-html>
          <!-- #endif -->
        </scroll-view>
      </view>
    </view>
    <view class="motaikuang motaikuang2" v-show="show2" @click="show2 = false">
      <div class="tips" @click.stop="aaa">
        <div class="text">
          为了保护您的合法权益，登录/注册前请仔细阅读并同意以下协议:
          <view class="tags" @click="tags(2)"> 《帮帮同城隐私政策》 </view>
          &
          <view class="tags" @click="tags(3)"> 《帮帮同城用户协议》 </view>
        </div>
        <div class="btns">
          <div class="btn flex_center" @click="show2 = false">不同意</div>
          <div class="btn flex_center" @click="confirmClick">同意</div>
        </div>
      </div>
    </view>
  </view>
</template>

<script>
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  import Verify from '@/components/VueImageVerify.vue'
  export default {
    data() {
      return {
        phone: '',
        Verifys: '',
        show: false,
        totalTime: 60,
        content: '获取验证码',
        canClick: true,
        status: false,
        reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/,
        reg_tel1: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
        loading: false,
        password: '',
        code: '',
        checkBoxs: [],
        show1: false,
        show2: false,
        showPhoneLogin: false,
        sendCode: 0,
        form: {
          mobile: '',
          code: '',
        },
        data: {},
        text: '',
        userOpenid: '',
		xOpenid:'',
        convencid: '',
        latitude: '',
        longitude: '',
        registCity: '',
        pages: [],
      }
    },
    components: {
      verify: Verify,
    },
    onLoad() {
      this.pages = getCurrentPages()
      let taskInfo = uni.getStorageSync('taskInfo')
      this.getLocation()
      //if (taskInfo && uni.getStorageSync('locationState') == 1) {
      //}
      // this.wxlogin()
    },
    onShow() {
      this.wxlogin()
    },
    mounted() {
      // this.getUser()
    },
    // onBackPress(from){
    //   console.log('返回被触发-------------------');
    //   console.log(from);
    //   uni.reLaunch({
    //     url: '/pages/index/index',
    //   })
    //   return false;
    // },
    methods: {
      async getLocation() {
        let that = this
        // #ifdef APP-PLUS
        let isAndroid = false
        const res = uni.getSystemInfoSync()
        if (res.platform == 'android') {
          isAndroid = true
        } else {
          isAndroid = false
        }
        if (isAndroid) {
          that.authorizationApp(
            'locationState',
            'android.permission.ACCESS_FINE_LOCATION',
            '您已关闭位置权限或获取位置信息失败',
            that.getLocation1()
          )
        } else {
          that.getLocation1()
        }
        //  #endif
        // #ifndef APP-PLUS
        that.getLocation1()
        //  #endif
      },
      getAddress() {
        let lat = this.latitude
        let lng = this.longitude
        let that = this
        uni.request({
          url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=ZSTBZ-AQQKW-5SURG-YN5ZG-VYJO7-2YFQR`, //仅为示例，并非真实接口地址。
          success: (res) => {
            that.registCity = res.data.result.address_component.district
          },
        })
      },
      getLocation1() {
        let _this = this
        uni.showLoading({
          title: '加载中',
          mask: false,
        })
        console.log('getLocation1')
        uni.getLocation({
          type: 'gcj02',
          // highAccuracyExpireTime: "3000",
          success(res) {
            console.log('111')
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            _this.getAddress()
            // _this.getFy()
          },
          fail:(res) => {
            console.log(res, '经纬度没有授权');
            this.$SHOWMODAL_TO_SETTINGS();
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              // uni.showModal({
              //   title: '提示',
              //   content: '您已关闭位置权限或获取位置信息失败',
              //   success: function (res) {
              //     if (res.confirm) {
              //       // plus.runtime.openURL("app-settings:");
              //       if (plus.os.name === 'iOS') {
              //         plus.runtime.openURL('app-settings://')
              //       } else {
              //         var Intent = plus.android.importClass('android.content.Intent')
              //         var Settings = plus.android.importClass('android.provider.Settings')
              //         var Uri = plus.android.importClass('android.net.Uri')
              //         var mainActivity = plus.android.runtimeMainActivity()
              //         var intent = new Intent()
              //         intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
              //         var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
              //         intent.setData(uri)
              //         mainActivity.startActivity(intent)
              //       }
              //     } else if (res.cancel) {
              //       console.log('用户点击取消')
              //     }
              //     // _this.getFy()
              //   },
              // })
              return false
            }
          },
          complete() {
            uni.hideLoading()
          },
        })
      },
      // 判断本地有没有信息
      wxlogin() {
        // if (uni.getStorageSync("sessionKey")) {
        // 	return
        // }
        uni.login({
          provider: 'weixin',
          success: (res) => {
            this.$myRequest
              .get('/mob/login/getOpenId', {
                code: res.code,
              })
              .then((res) => {
                this.userOpenid = res.unionid
                this.xOpenid = res.openId
                uni.setStorageSync('sessionKey', res.sessionkey)
              })
          },
          fail: (error) => {},
        })
      },
      // getUser() {
      // 	if (uni.getStorageSync("userInfo")) {
      // 		return
      // 	}
      //   let that = this;
      //   this.$myRequest
      //     .get("/mob/login/getUserByWXOpenId", {
      //       openId: this.userInfo1.openid
      //     })
      //     .then(res => {
      //       this.userInfo = res.userInfo;
      //       uni.setStorageSync("userInfo", JSON.stringify(this.userInfo1));
      //     });
      // },
      disagree() {
        if (!this.status) {
          this.show2 = true
          return false
        }
        // uni.showModal({
        //   title: "",
        //   content: "请阅读用户条款并勾选同意后登录",
        //   // confirmText: '同意',
        //   // cancelText: '不同意',
        //   showCancel: false,
        //   success: function (res) {
        //     if (res.confirm) {
        //       console.log("用户点击确定");
        //     } else if (res.cancel) {
        //       console.log("用户点击取消");
        //     }
        //   }
        // });
      },
      decryptPhoneNumber(e) {
        if (e.detail.code) {
          this.register(e.detail.encryptedData, e.detail.iv)
        }
        // else{
        //   uni.showToast({
        //     title: "获取失败，用户拒绝获取手机号，请自行注册登录",
        //     icon: "none",
        //     mask: true,
        //     success(){
        //       setTimeout(()=>{
        //         uni.navigateTo({
        //           url: "/pages/login/register"
        //         });
        //       },1500)
        //     }
        //   });
        // }
      },
      aaa() {},
      back() {
        uni.reLaunch({
          url: '/pages/index/index',
        })
        // if (uni.getStorageSync('Pduser')) {
        //   uni.navigateBack({
        //     delta: 1,
        //   })
        // } else {
        //   uni.reLaunch({
        //     url: '/pages/index/index',
        //   })
        // }
      },
      checkClick() {
        this.status = !this.status
      },
      phoneCodeLogin() {
        if (!this.status) {
          this.show2 = true
          return false
        }
        this.showPhoneLogin = true
      },
      confirmClick() {
        this.status = true
        this.show2 = false
      },
      login() {
        const that = this;
        let taskInfo = uni.getStorageSync('taskInfo')
        if (!this.reg_tel.test(this.form.mobile)) {
          uni.showToast({
            title: '请填写正确的手机号码',
            icon: 'none',
            mask: true,
          })
          return
        }
        let disabled = true
        if (this.Verifys != this.form.code) {
          uni.showToast({
            title: '验证码不正确，请重新填写',
            icon: 'none',
            mask: true,
          })
          disabled = false
        }
        if (!disabled) return
        uni.showLoading({
          title: '加载中...',
        })
        this.$myRequest
          .post('/mob/login/phoneLogin', {
            phone: this.form.mobile,
            wxOpenid: this.userOpenid,
			xOpenid:this.xOpenid,
            phoneCode: this.form.code,
            loginType: '1',
            convencid: this.convencid,
            registCity: this.registCity,
            AUserId: taskInfo ? taskInfo.userId : '',
            taskNo: taskInfo ? taskInfo.taskId : '',
          })
          .then((res) => {
            uni.hideLoading();
            if (!res.success) {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                mask: true,
                duration: 2500
              })
              if (res.msg == '当前用户已被冻结，无法登录') {
                this.$refs.binds.open()
                this.userIds = res.userInfo.id
              }
            } else {
              console.log(res.userInfo, '手机号登陆')
              uni.setStorageSync('Pduser', res.userInfo)
              this.$store.dispatch('user/login', res.userInfo)
              uni.showToast({
                title: '登录成功',
                icon: 'none',
                mask: true,
              })
              if (res.userInfo.businessType == 1) {
                this.$myRequest
                  .get('/mob/user/isMarkResignation', {
                    userId: res.userInfo.id,
                  })
                  .then((res) => {
                    if (res.code == 200) {
                      console.log(res)
                      getApp().globalData.confirm = res.confirm
                    }
                  })
              } else {
                this.$myRequest
                  .get('/api/mobile/vehicleOwner/getWhetherMarkResignationByUserId', {
                    userId: res.userInfo.id,
                  })
                  .then((res) => {
                    if (res.code == 200) {
                      getApp().globalData.confirm = res.confirm
                    }
                  })
              }
              setTimeout(() => {
                this.back();
                // let pages = getCurrentPages()
                // if (pages.length > 1) {
                //   uni.navigateBack({
                //     delta: 1,
                //   })
                // } else {
                //   uni.switchTab({ url: '/pages/index/index' })
                // }
              }, 1500)
            }
          })
      },
      getcode() {
        this.form.mobile = this.form.mobile.trim()
        if (!this.reg_tel.test(this.form.mobile)) {
          uni.showToast({
            title: '请填写正确的手机号码',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (!this.canClick) return
        this.show = true
      },
      Handle(success) {
        if (!this.canClick) return //改动的是这两行代码
        this.canClick = false
        this.show = false
        this.$myRequest
          .get('/mob/login/phoneVerification.do', {
            phone: this.form.mobile,
          })
          .then((res) => {
            console.log(res.CODE);
            this.sendCode = 60
            if (res.success) {
              this.Verifys = res.CODE
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                mask: true,
              })
              if (res.msg === '请先注册后登录') {
                let time = setTimeout(() => {
                  uni.navigateTo({
                    url: '/pages/login/register',
                  })
                  clearTimeout(time)
                }, 1500)
              }
            }
            let clock = setInterval(() => {
              this.sendCode--
              if (this.sendCode <= 0) {
                this.canClick = true //这里重新开启
                this.sendCode = 0
                clearInterval(clock)
              }
            }, 1000)
          })
      },

      checkboxC(e) {
        console.log(e, 1)
        this.checkBoxs = e.detail.value
      },
      async tags(type) {
        this.type = type
        if (type == 2) {
          this.text = '隐私协议'
        } else if (type == 3) {
          this.text = '用户服务协议'
        }
        await this.getContent()
        this.show1 = true
      },
      getContent() {
        let _this = this
        _this.$myRequest
          .get('/mob/user/getText', {
            type: this.type,
          })
          .then((res) => {
            this.data = res.list[0]
            this.scrollTop = this.oldScrollTop
            //当视图渲染结束 重新设置为0
            this.$nextTick(() => {
              this.show1 = true
              this.scrollTop = 0
            })
          })
      },
      register(encryptedData, iv) {
        let taskInfo = uni.getStorageSync('taskInfo')
        let that = this
        let sessionkey = uni.getStorageSync('sessionKey')
        // let  userInfo = JSON.parse(uni.getStorageSync("userInfo"));
        this.$myRequest
          .get('/mob/login/getPhoneNumber.do', {
            sessionkey: sessionkey,
            encryptedData: encryptedData,
            iv: iv,
          })
          .then((res) => {
            console.log(res)
            that.$myRequest
              .post('/mob/login/phoneOneClickLogin', {
                phone: res.phoneNumber,
                wxOpenid: this.userOpenid,
                xOpenid: this.xOpenid,
                convencid: '',
                registCity: this.registCity,
                AUserId: taskInfo ? taskInfo.userId : '',
                taskNo: taskInfo ? taskInfo.taskId : '',
              })
              .then((res) => {
                console.log('手机号登陆结果:' + res)
                uni.setStorageSync('Pduser', res.userInfo)
                that.$store.dispatch('user/login', res.userInfo)
                setTimeout(function () {
                  uni.switchTab({ url: '/pages/index/index' })
                }, 200)
              })
          })
      },
    },
  }
</script>

<style lang="less" scoped>
  .flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box {
    min-height: 100vh;
    background: #fff;
  }

  .top {
    padding-top: 88rpx;
    // background: #64b6a8;
    background: transparent;

    .title {
      // text-align: center;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 36rpx;
      color: #fff;
      padding: 0 37rpx;
      text-align: center;
      font-size: 34rpx;
      color: #000;
    }

    .back {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .login-main {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    height: 82vh;
    max-height: calc(82vh - 88rpx);

    .login {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: #64b6a8;
      color: #fff;
      border-radius: 100rpx;
      margin-bottom: 20rpx;
      font-size: 34rpx;
    }
    .login-box {
      // .login1 {
      // margin-top: 138rpx;
      // }
      .login2 {
        background: transparent;
        border: 2rpx solid #64b6a8;
        color: #64b6a8;
      }

      .login3 {
        background: transparent;
        color: #999;
        border: 2rpx solid #999;
      }

      .checkbox-box {
        width: 68rpx;
        height: 68rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .checkbox {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          border: 2rpx solid #64b6a8;

          &.active {
            background: #64b6a8;
          }
          &.active::after,
          &.active::before {
            content: '';
            background: #fff;
            width: 4rpx;
            border-radius: 10rpx;
          }
          &.active::before {
            height: 22rpx;
            transform: translate(6rpx, 0rpx) rotate(45deg);
          }
          &.active::after {
            height: 12rpx;
            transform: translate(-10rpx, 4rpx) rotate(-45deg);
          }
        }
      }
    }
    .phone-login-box {
      width: 100%;
      height: calc(100% - 164rpx - 98rpx);
      .phone-login {
        height: 100%;
        padding: 90rpx 100rpx 0;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        .login-form {
          // .input {

          // }
          .code,
          .mobile {
            padding-bottom: 20rpx;
            border-bottom: 1rpx solid #d0d0d0;
          }
          .mobile {
            display: flex;
            align-items: center;
            margin-bottom: 116rpx;
            // .country-code {

            // }
          }
          .code {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .input {
              width: calc(100% - 200rpx);
            }
            .getcode {
              color: #999;
              &.active {
                color: #64b6a8;
                // width:
              }
            }
          }
        }
      }
    }
  }
  .login-box {
    width: 600rpx;
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-50%,-50%);

    .box-title {
      line-height: 75rpx;
      font-size: 46rpx;
      margin-bottom: 105rpx;
      color: #64b6a8;
      font-weight: 600;
    }

    .input-box {
      height: 65rpx;
      border-bottom: 1rpx solid #d0d0d0;
      position: relative;
      margin-bottom: 52rpx;

      input {
        width: 100%;
        height: 64rpx;
        line-height: 64rpx;
        color: #333;
        font-size: 28rpx;
      }

      .area {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #333;
        left: 0;
      }

      .line {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #333;
        left: 60rpx;
        height: 30rpx;
        width: 2rpx;
        background: #333;
      }

      .getcode {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        color: #64b6a8;
        font-size: 28rpx;
        z-index: 10;
      }
    }

    .agreement {
      display: flex;
      padding-left: 10rpx;
      padding-top: 50rpx;
      font-size: 26rpx;
      align-items: center;

      // .checkbox-group {
      //   width: 32rpx !important;
      //   height: 40rpx !important;
      // }

      .text {
        display: flex;
        align-items: center;
        line-height: 37rpx;
        margin-left: 10rpx;
      }

      .tags {
        color: #64b6a8;
      }
    }

    .flex-end {
      display: flex;
      justify-content: space-between;
      align-items: center;

      view {
        font-size: 26rpx;
        line-height: 37rpx;
        color: #666666;
      }
    }
  }

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 0 80rpx;

    .bottom-top {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 40rpx;
      width: 550rpx;
      margin: 0 auto 58rpx;

      .line {
        width: 100rpx;
        height: 2rpx;
        background: #666;
      }

      .title-text {
        font-size: 28rpx;
        color: #666;
      }
    }

    .bottom-loginType {
      display: flex;
      justify-content: center;
      align-items: center;

      .type {
        width: 120rpx;
        text-align: center;
        margin-right: 60rpx;

        image {
          width: 80rpx;
          height: 80rpx;
        }

        view {
          font-size: 28rpx;
          line-height: 40rpx;
          margin-top: 10rpx;
        }
      }

      .type:last-child {
        margin-right: 0;
      }
    }
  }

  .agreement {
    display: flex;
    padding-left: 10rpx;
    padding-top: 50rpx;
    font-size: 24rpx;
    align-items: center;

    .checkbox-group {
      // width: 50rpx !important;
      // height: 40rpx !important;
      /* #ifdef MP */
      width: 50rpx !important;
      height: 50rpx !important;
      /* #endif */
      /* #ifdef APP-PLUS || H5 */
      width: 32rpx !important;
      height: 32rpx !important;
      /* #endif */
    }

    .text {
      display: flex;
      align-items: center;
      line-height: 37rpx;
      margin-left: 10rpx;
    }

    .tags {
      color: #64b6a8;
    }
  }

  .motaikuang {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;

    .verify {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .motaikuang1 {
    .text {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #fff;
      left: 0;
      padding-top: 60rpx;
      padding-bottom: 100rpx;
      border-radius: 50rpx 50rpx 0 0;

      .textTitle {
        font-size: 36rpx;
        line-height: 50rpx;
        text-align: center;
        margin-bottom: 50rpx;
      }

      .scroll-view {
        height: 700rpx;
        margin: 0 auto;
        width: 630rpx;
      }
    }
  }

  .motaikuang2 {
    .tips {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #fff;
      left: 0;
      padding: 40rpx 30rpx 100rpx;
      border-radius: 50rpx 50rpx 0 0;
      .text {
        margin-bottom: 48rpx;
      }
      .btns {
        display: flex;
        .btn {
          height: 90rpx;
          width: 50%;
          &:first-child {
            background: #f2f2f2;
            border-radius: 10rpx 0rpx 0rpx 10rpx;
          }
          &:last-child {
            background: #64b6a8;
            color: #fff;
            border-radius: 0rpx 10rpx 10rpx 0rpx;
          }
        }
      }
    }
    .tags {
      color: #64b6a8;
      display: inline-block;
    }
  }

  /deep/.uni-checkbox-input-checked {
    background-color: #64b6a8 !important;
    border-color: #64b6a8 !important;
  }

  /deep/ .uni-checkbox-input {
    border-color: #666;
    background: #fff;
  }
</style>
